<template>
  <div id="detail" @click="closeMsg">
    <div class="detai">
      <div style="width: 94%" class="closes">
        <p class="detail_p" @click="to_top">︿</p>
        <div class="detail_box">
          <div class="de_top">
            <img class="de_top_img" :src="img" alt="" />
            <div class="top_b">
              <p class="top_b_p">{{ name }}</p>
              <div class="top_box">
                <p class="top_box_p">
                  <i></i>
                  <span>0</span>
                  <span>followers</span>
                </p>
                <p class="top_box_p">
                  <i></i>
                  <span>0</span>
                  <span>starts</span>
                </p>
              </div>
            </div>
          </div>
          <div class="de_top mail">
            <i></i>
            <span>Email</span>
          </div>
          <div class="de_top phone">
            <i></i>
            <span>Bio</span>
          </div>
        </div>
        <p class="detail_p" @click="to_bottom">﹀</p>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/details.css";
import imgs from "@/assets/logo.png";
import imgs1 from "@/assets/img/index_lun.png";
export default {
  name: "detail",
  props: {
    userdatils: {
      type: Array,
    },
    show: {
      type: Boolean,
    },
    userData: {
      type: Array,
    },
  },
  data() {
    return {
      img: "",
      name: "",
      newuserdatils: [],
    };
  },
  created() {
    this.img = this.userdatils[0].users[0].img;
    this.name = this.userdatils[0].users[0].name;
    this.newuserdatils = this.userdatils;
  },
  computed: {},
  methods: {
    closeMsg: function (ev) {
      var btn = document.querySelector(".closes");
      if (btn) {
        if (!btn.contains(ev.target)) {
          this.$emit("changeComponent1Data", false);
        }
      }
    },
    to_top: function () {
      var newArr = [];
      var info = [];
      var i = this.newuserdatils[0].i;
      var j = this.newuserdatils[0].users[0].id;
      var k = j - 1;
      var index = this.userData[i].index;
      var infos = this.userData[i].users[k];
      info = [];
      info.push(infos);
      if (i >= 0) {
        if (infos != undefined) {
          this.img = infos.img;
          this.name = infos.name;
          var obj = {
            index: index,
            users: info,
            i: i,
          };
          newArr = [];
          newArr.push(obj);
          this.newuserdatils = newArr;
        } else {
          var m = i - 1;
          if (m < 0) {
            return false;
          }
          var leng = "";
          var indexs = this.userData[m].index;
          var len = this.userData[m].users.length;
          if (len > 0) {
            leng = len - 1;
          }
          var infom = this.userData[m].users[leng];
          info = [];
          this.img = infom.img;
          this.name = infom.name;
          info.push(infom);
          var objs = {
            index: indexs,
            users: info,
            i: m,
          };
          newArr = [];
          newArr.push(objs);
          this.newuserdatils = newArr;
        }
      }
    },
    to_bottom: function () {
      var newArr = [];
      var info = [];
      var i = this.newuserdatils[0].i;
      var j = this.newuserdatils[0].users[0].id;
      var k = j + 1;
      var index = this.userData[i].index;
      var infos = this.userData[i].users[k];
      info.push(infos);
      if (infos != undefined) {
        this.img = infos.img;
        this.name = infos.name;
        var obj = {
          index: index,
          users: info,
          i: i,
        };
        newArr.push(obj);
        this.newuserdatils = newArr;
        console.log(this.newuserdatils);
      } else {
        var m = i + 1;
        if (m > this.userData.length - 1) {
          return false;
        }
        var leng = "";
        var indexs = this.userData[m].index;
        var len = this.userData[m].users.length;
        if (len >= 0) {
          leng = 0;
        }
        var infom = this.userData[m].users[leng];
        info = [];
        this.img = infom.img;
        this.name = infom.name;
        info.push(infom);
        var objs = {
          index: indexs,
          users: info,
          i: m,
        };
        newArr = [];
        newArr.push(objs);
        this.newuserdatils = newArr;
      }
    },
  },
};
</script>

<style scoped>
</style>